<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>繁花曲线</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/cf-blob.js@0.0.1/Blob.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@1.3.8/FileSaver.min.js"></script>
    <script src="gif.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/blueimp-canvas-to-blob@3.14.0/js/canvas-to-blob.min.js"></script>
    <style>
        .checkbox {
            width: 15px;
            height: 15px;
        }

        .tadjusted tr td {
            height: 20px;
        }

        #settings tr td {
            cursor: auto;
        }

        #settings tr td:hover {
            cursor: pointer;
        }

        #button-group tr td {
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        .top-cat {
            margin-top: 5px;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .no-animation {
            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            -o-transition: none;
            transition: none;
        }
    </style>
</head>
<body style="margin: auto auto; width: 1180px">
<table>
    <thead>
    <tr>
        <td style="text-align: center; margin-bottom: 0;padding-bottom: 0">
            <p class="top-cat">
            <h3>绘画孔设置</h3></p>
        </td>
        <td style="text-align: center; margin-bottom: 0;padding-bottom: 0">
            <p class="top-cat">
            <h3>画布</h3></p>
        </td>
        <td style="text-align: center; margin-bottom: 0;padding-bottom: 0">
            <p class="top-cat">
            <h3>参数设置</h3></p>
        </td>
    </tr>
    </thead>
    <tr>
        <td style="width: 250px;vertical-align: top;text-align: center">
            <table class="table table-striped table-sm" style="text-align: left;">
                <tr style="text-align: center">
                    <td colspan="2"><h5>绘画孔</h5></td>
                </tr>
                <tr>
                    <td><label for="dotSize">尺寸</label></td>
                    <td>
                        <input type="number" id="dotSize" style="width: 50px" value="2" step="1" max="200" min="1">
                    </td>
                </tr>
                <tr>
                    <td><label for="dotColor">颜色</label></td>
                    <td><input type="color" id="dotColor"/></td>
                </tr>
                <tr>
                    <td><label for="dotDistance">离中心的距离</label></td>
                    <td><input type="number" id="dotDistance" style="width: 50px" value="80" step="1" max="800" min="1">
                    </td>
                </tr>
                <tr>
                    <td><label for="dotRotOffset">旋转角度</label></td>
                    <td><input type="number" id="dotRotOffset" style="width: 50px" value="0" step="1" max="360" min="0">°
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <button type="button" class="btn btn-primary" onclick="addDot()">添加</button>&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-secondary" onclick="randomDot()">随机生成</button>&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn" data-toggle="modal" data-target="#RangeModalCenter"
                                title="修改随机范围">
                            <i class="fas fa-cog" aria-hidden="true"></i>
                        </button>
                        <div class="modal fade" id="RangeModalCenter" tabindex="-1" role="dialog"
                             aria-labelledby="RangeModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="RangeModalLongTitle">修改随机范围</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table">
                                            <thead class="thead-dark">
                                            <tr>
                                                <th></th>
                                                <th>最小</th>
                                                <th>最大</th>
                                            </tr>
                                            </thead>
                                            <tr>
                                                <td>绘画孔尺寸</td>
                                                <td><input id="dotSizeMin" style="width: 50px;" type="number" min="1"
                                                           max="10" value="1"></td>
                                                <td><input id="dotSizeMax" style="width: 50px;" type="number" min="1"
                                                           max="10" value="5"></td>
                                            </tr>
                                            <tr>
                                                <td>离中心的距离</td>
                                                <td><input id="dotDistanceMin" style="width: 50px;" type="number"
                                                           min="0" max="400" value="1"></td>
                                                <td><input id="dotDistanceMax" style="width: 50px;" type="number"
                                                           min="0" max="400" value="120"></td>
                                            </tr>
                                            <tr>
                                                <td>旋转角度</td>
                                                <td><input id="dotRotMin" style="width: 50px;" type="number" min="0"
                                                           max="359" value="0"></td>
                                                <td><input id="dotRotMax" style="width: 50px;" type="number" min="0"
                                                           max="359" value="359"></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Save
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-striped table-sm table-hover" style="text-align: left;" id="settings">
                <tr>
                    <th colspan="2" style="text-align: center"><h5>绘画孔列表</h5></th>
                </tr>
            </table>
            <div class="modal fade" id="DotModalCenter" tabindex="-1" role="dialog"
                 aria-labelledby="DotModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="DotModalLongTitle">修改绘画孔参数</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped table-bordered"
                                   style="text-align: left; width: 360px; margin: auto auto; font-size: 21px;">
                                <tr>
                                    <th><label for="m-dotSize">尺寸</label></th>
                                    <td>
                                        <input type="hidden" id="m-dotID" value="">
                                        <input type="number" id="m-dotSize" style="width: 60px" value="6" step="1"
                                               max="200" min="1">
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="m-dotColor">颜色</label></th>
                                    <td><input type="color" id="m-dotColor"/></td>
                                </tr>
                                <tr>
                                    <th><label for="m-dotDistance">离中心的距离</label></th>
                                    <td><input type="number" id="m-dotDistance" style="width: 60px" value="80" step="1"
                                               max="800" min="1">
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="m-dotRot">旋转角度</label></th>
                                    <td><input type="number" id="m-dotRot" style="width: 60px" value="0" step="1"
                                               max="360" min="0">°
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="postModify()">
                                保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td style="text-align: center">
            <div style="position: relative; width: 640px; height: 640px">
                <canvas id="canvas-top" width="640px" height="640px"
                        style="left:0;position: absolute;z-index: 1"></canvas>
                <canvas id="canvas-bottom" width="640px" height="640px"
                        style="left: 0;position: absolute;z-index: 0"></canvas>
                <canvas id="canvas-temp" width="640px" height="640px"
                        style="left: 0;position: absolute;z-index: -1; display: none"></canvas>
            </div>
            <div id="progressdiv" class="progress"
                 style="width: 600px; height: 25px; margin: auto auto; text-align: center; position: relative">
                <div id="progressbar" class="progress-bar progress-bar-striped progress-bar-animated no-animation"
                     role="progressbar" style="width: 0%;"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                <div style="position: absolute; left: 0; width: 600px; text-align: center; height:25px; line-height:25px;">
                    <div id="progressLabel" style="display: inline-block; font-size: 18px;"></div>
                </div>
            </div>
        </td>
        <td style="width: 250px;vertical-align: top;text-align: center">
            <table class="table table-striped table-sm" style="text-align: left;">
                <tr>
                    <td><label for="mcRadius">外圆（母尺）直径</label></td>
                    <td>
                        <input type="number" id="mcRadius" style="width: 50px" value="300" step="1" max="1000"
                               min="100">
                    </td>
                </tr>
                <tr>
                    <td><label for="innerRadius">内圆（子尺）直径</label></td>
                    <td>
                        <input type="number" id="innerRadius" style="width: 50px" value="120" step="1" max="800"
                               min="10" onclick="adjustDotDistanceCap(this)">
                    </td>
                </tr>
                <tr>
                    <td><label for="showOC">显示外圆</label></td>
                    <td><input type="checkbox" id="showOC" class="checkbox" checked/></td>
                </tr>
                <tr>
                    <td><label for="showIC">显示内圆</label></td>
                    <td><input type="checkbox" id="showIC" class="checkbox"/></td>
                </tr>
                <tr>
                    <td><label for="showSk" title="显示连接内圆中心和绘图孔的线">显示骨架</label></td>
                    <td><input type="checkbox" id="showSk" class="checkbox"/></td>
                </tr>
                <tr>
                    <td><label for="clearBeforeDrawing">绘图前清空画板</label></td>
                    <td><input type="checkbox" id="clearBeforeDrawing" class="checkbox"/></td>
                </tr>
                <tr>
                    <td>
                        <label for="step"
                               title="每隔多少弧度画一次内圆和绘图孔。越小图像质量越高但是绘图时间越长">
                            绘图步长</label>
                    </td>
                    <td>
                        <input type="number" id="step" style="width: 60px" value="0.005" step="0.001" max="0.5"
                               min="0.001">
                    </td>
                </tr>
                <tr>
                    <td><label for="delay" title="画每一步之间的延迟，以毫秒记">绘图延迟</label></td>
                    <td>
                        <input type="number" id="delay" style="width: 50px" value="2" step="1" max="10" min="0">
                    </td>
                </tr>
                <tr>
                    <td><label for="ratio" title="">完整度</label></td>
                    <td>
                        <input type="number" id="ratio" style="width: 60px" value="1" step="0.001" max="1" min="0.001">
                    </td>
                </tr>
                <tr>
                    <td><label for="direction">反向</label></td>
                    <td><input type="checkbox" id="direction" class="checkbox"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="configloader">加载配置文件</label>
                        <input type="file" id="configloader" onchange="loadConfig(this.files)" style="width:220px;"/>
                    </td>
                </tr>
            </table>
            <table id="button-group" style="width: 200px; margin: auto auto; text-align: center;">
                <tr>
                    <td>
                        <button class="btn btn-warning" onclick="caller(undefined)" style="width:75px;">绘制</button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-info" onclick="previewRuler()" style="width:75px;">预览
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger" onclick="stopDrawing()" style="width:50px;">
                                停止
                            </button>
                            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:clear()">清空</a>
                                <a class="dropdown-item" onclick="clearBottom()">清空内圆和外圆</a>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-info" onclick="saveConfig()" style="width:50px;">保存
                            </button>
                            <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" data-toggle="modal" data-target="#PNGModalCenter">存为PNG</a>
                                <a class="dropdown-item" data-toggle="modal" data-target="#GIFModalCenter">存为GIF</a>
                            </div>
                        </div>
                        <div class="modal fade" id="GIFModalCenter" tabindex="-1" role="dialog"
                             aria-labelledby="GIFModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="GIFModalLongTitle">GIF 参数设置</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table table-striped table-bordered table-sm"
                                               style="text-align: left; width: 360px; margin: auto auto; font-size: 18px;">
                                            <tr>
                                                <th><label for="f-size">GIF尺寸（像素）</label></th>
                                                <td>
                                                    <input type="number" id="f-size" style="width: 75px" value="320"
                                                           step="1" max="640" min="1">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>
                                                    <label for="f-interval"
                                                           title="多长时间取一帧。40表示每绘制四十步就取一帧">
                                                        每帧间隔
                                                    </label>
                                                </th>
                                                <td>
                                                    <input type="number" id="f-interval" style="width: 60px" value="40"
                                                           step="1" max="200" min="1"> ms
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>
                                                    <label for="f-delay" title="每帧应该存在多少毫秒">
                                                        每帧延迟
                                                    </label>
                                                </th>
                                                <td><input type="number" id="f-delay" style="width: 60px" value="20"
                                                           step="1" max="1000" min="1"> ms
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><label for="f-transparent">透明</label></th>
                                                <td><input type="checkbox" id="f-transparent"
                                                           style="width: 20px; height: 20px"
                                                           onchange="$('#f-bgcolor').attr('disabled', this.checked)">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><label for="f-bgcolor">背景颜色</label></th>
                                                <td><input type="color" id="f-bgcolor" value="#FFFFFF"/></td>
                                            </tr>
                                            <tr>
                                                <th><label for="f-quality" title="数值越小质量越好">Quality</label></th>
                                                <td><input type="number" id="f-quality" style="width: 60px" value="10"
                                                           step="1" max="20" min="1">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>
                                                    <label for="f-lastdelay" title="最后一帧应该存在多少毫米">
                                                        最后一帧延迟
                                                    </label>
                                                </th>
                                                <td>
                                                    <input type="number" id="f-lastdelay" style="width: 75px"
                                                           value="1000" step="1"
                                                           max="5000" min="1"> ms
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                            关闭
                                        </button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                                                onclick="saveToGIF()">
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="PNGModalCenter" tabindex="-1" role="dialog"
                             aria-labelledby="GIFModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="PNGModalLongTitle">PNG 参数</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table table-striped table-bordered"
                                               style="text-align: left; width: 360px; margin: auto auto; font-size: 18px;">
                                            <tr>
                                                <th><label for="p-size">PNG 尺寸</label></th>
                                                <td>
                                                    <input type="number" id="p-size" style="width: 75px" value="320"
                                                           step="1" max="640" min="1"> px
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><label for="p-transparent">透明</label></th>
                                                <td><input type="checkbox" id="p-transparent"
                                                           style="width: 20px; height: 20px"
                                                           onchange="$('#p-bgcolor').attr('disabled', this.checked)">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><label for="p-bgcolor">背景色</label></th>
                                                <td><input type="color" id="p-bgcolor" value="#FFFFFF"/></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                            关闭
                                        </button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                                                onclick="saveToPNG()">
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script>
    var lan = {
        'Save as GIF: ' : '绘图中：',
        'Save as GIF: Finished': '保存为GIF: 已完成',
        'Drawing: Finished': '绘图中：已完成',
        'Drawing: ' : '绘图中：'
    };
</script>
<script src="main.js"></script>
<div style="width: 400px; margin: auto auto">
    <span style="font-size:18px;">
        <a href="https://github.com/hanzhi713" target="_blank">周涵之</a>开发。
        点<a href="https://github.com/hanzhi713/Flowers-Curve/wiki" target="_blank">这里</a>查看详细指南。<a href="index.html">English</a>
    </span>
</div>
</body>
</html>